<template>
  <div class="tuijian-box">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in list" :key="item.id">
        <img src="../../../assets/u55.png" alt />
        <span>8折</span>
        <div class="grid-content bg-purple">
          <img @click="toDetail(item)" :src="item.imgUrl" alt />
          <p>
            <span>{{item.name}}</span>
            <span class="price">主持价格：{{item.price}}</span>
          </p>
        </div>
      </el-col>
      <!-- <el-col :span="6">
        <img src="../../../assets/u55.png" alt />
        <span>8折</span>
        <div class="grid-content bg-purple">
          <img @click="toDetail" src="../../../assets/lxq.jpg" alt />
          <p>
            <span>张学友</span>
            <span class="price">主持价格：9000</span>
          </p>
        </div>
      </el-col> -->         
    </el-row>
  </div>
</template>

<script>
export default {
    name:'Tuijian',
    props:['list'],
    data(){
      return{
        
      }
    },
    mounted(){
    
    },
    methods:{
      toDetail(cs){
        console.log(cs);
        this.$router.push({
          path:'hostdetail',
          query:{
            data:cs
          }
        })
        
      }
    }
};
</script>

<style scoped>
/* 推荐主持人 */
.tuijian-box{
    padding:0 20px;
    box-sizing: border-box;
}
.el-col{
    margin: 20px 0;
    box-sizing: border-box;
    position: relative;
    height: 230px;
}
.el-col>img{
    border-width: 0px;
    position: absolute;
    width: 86px;
    height: 66px;
    top: -15px;
    left: -20px;
}
.el-col>span{
    position: absolute;
    width: 86px;
    height: 30px;
    top: 5px;
    left: -20px;
    text-align: center;
}
.grid-content img{
    width: 240px;
    height: 190px;
    margin-right: 40px;
}
.grid-content p{
    height: 32px;
    line-height: 32px;
    background: #DCDFE6;
    margin-right: 35px;
    padding-left: 10px;
}
.grid-content span{
    width: 80px;
    display: inline-block;
}
.grid-content .price{
  width: 140px;
  display: inline-block;
}
</style>